import React, { useEffect, useRef } from "react"
import * as echarts from 'echarts'
import  { EChartsType } from 'echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'

export const DynamicLineChart: React.FC = (props) => {

  let { current: chart } = useRef<EChartsType>()
  //componentDidMount

  const options = ({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  })

  useEffect(() => {
    chart = echarts.init(document.getElementById('line-chart'))
    chart.setOption(options)
    return () => chart.dispose()
  }, [])

  

  return (
    <div id="line-chart"></div>
  )
}